<template>
  <div class="container"
       v-if="reFresh">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll"
                 @scrolltolower="pullrefresh">
      <div class="mask"
           v-if="ismask"
           @click.stop="ismask=false"></div>
      <div class="itembox fadelogIn"
           v-if="ismask">
        <sorting @getVal="getTypeId"></sorting>
        <div class="box">
          <ul class="leftlist">
            <li v-for="(item,index) in items"
                :key="index"
                :class="{'active':leftCurrent == index}"
                class="item"
                @click="getLeft(index,item)">{{item.name}}</li>
          </ul>
          <ul class="leftlist right">
            <li v-for="(item,index) in rightData"
                :key="index"
                class="item1"
                :class="{'active':rightCurrent == index}"
                @click="getRight(index,item)">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div style="height:36px"></div>
      <div class="contentbox">
        <div class="sort z-index">
          <sorting @getVal="getTypeId"
                   :sortText1="sortText"
                   :num1="num"></sorting>
        </div>
        <div class="listbox">
          <div class="cardlistbox"
               v-if="!empty">
            <ul class="cardlist">
              <li class="item"
                  v-for="(item,index) in viparr"
                  :key="index"
                  @click="toMore(item.id)">
                <div class="shadimg">
                  <img src="https://img.ameimeika.com/h5_images/lifebeauty/plusnobuy/shading%403x.png"
                       alt />
                </div>
                <div class="cardinfo">
                  <div class="position">{{item.shop_name}}</div>
                  <div class="name">{{item.card_name}}</div>
                  <div class="bottom">
                    <div class="price">
                      <span class="yang">¥</span>
                      {{item. sale_price}}
                    </div>
                    <div class="sale">已售:&nbsp;{{item. sale_num}}</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="empty"
               v-if="empty">
            <img :src="imgUrl+'h5_images/mp_images/3.1/empty.png'"
                 alt
                 class="img" />
            <p class="text">即将上线，敬请期待</p>
          </div>
          <p class="bottomtext"
             v-if="isbottom">—— 因为甄选，所以珍稀 ——</p>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import sorting from "@/components/sort/sort";
import imageurl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      url: common.is_online
        ? "https://h5.ameimeika.com/life_beauty/#/"
        : "https://h5s.ameimeika.com/life_beauty/#/",
      imgUrl: imageurl,
      ImgBaseUrl: common.image_response, //img 域名
      lng: "",
      lat: "",
      page: 1,
      district_id: "",
      city_id: "",
      province_id: 13,
      type: 1,
      space_type: "",
      ismask: false,
      typeId: -1, //智能排序id
      items: [], //弹窗左边数据,
      leftCurrent: 0,
      rightCurrent: -1,
      rightData: [],
      sortText: "",
      popData: "",
      mark: -1, //智能排序标记点击到第几个元素
      current: 0,
      isbottom: false,
      province_name: "",
      viparr: [],
      pullFlag: true,
      empty: true,
      reFresh: true,
      menuTree: []
    };
  },
  components: {
    sorting
  },
  methods: {
    toMore (id) {
      let router = encodeURIComponent(`${this.url}cardInfor?id=${id}`);
      wx.navigateTo({
        url: `/pages/package_main/advertisement/main?url=${router}`
      });
    },
    // 上拉加载
    pullrefresh (e) {
      this.pullFlag = true;
      this.page++;
      this.getData(true);
    },
    screenFn () {
      this.ismask = true;
    },
    //筛选事件触发
    getData (e) {
      var flag = false;
      flag = e;
      if (this.isbottom) {
        return false;
      }
      common.mmk_Loading(0);
      var obj = {
        lng: this.lng,
        lat: this.lat,
        page: this.page,
        district_id: this.district_id,
        city_id: this.city_id,
        province_id: this.province_id,
        type: this.most
      };
      setTimeout(() => {
        common.fly_post("api/v4_5/plus/new_home", obj, res => {
          common.mmk_Loading(1);
          if (res.data.data.length == 0 && this.page == 1) {
            this.empty = true;
          } else {
            this.empty = false;
          }
          if (res.data && res.data.status_code == 0) {
            if (flag && this.pullFlag) {
              if (res.data.data.length > 0) {
                res.data.data.forEach(e => {
                  this.viparr.push(e);
                });
                this.pullFlag = true;
              } else {
                this.isbottom = true;
                this.pullFlag = false;
                return;
              }
            } else {
              this.viparr = res.data.data;
            }
          }
        });
      }, 200);
    },
    //弹窗数据
    getPopData () {
      common.fly_post(
        "api/v4_5/life_shop/shop_screen",
        {
          province_id: this.province_id
        },
        res => {
          common.mmk_Loading(1);
          // console.log(res);
          if (res.data && res.data.status_code == 0) {
            this.popData = res.data.data;
            this.items = res.data.data.city;
            this.rightData = this.items[0].area;
          }
        }
      );
    },
    getTypeId: function (e) {
      // console.log("mark",e)
      if (e.id !== 1) {
        this.ismask = true;
      } else if (e.id == 1 && e.mark) {
        this.space_type = 1;
        this.page = 1;
        this.getData();
      } else if (e.id == 1 && e.mark == false) {
        this.space_type = 0;
        this.page = 1;
        this.getData();
      }
      this.leftCurrent = -1;
      if (e.id == 1) {
        this.items = [];
        this.rightData = [];
        this.mark = 1;
        this.ismask = false;
      } else if (e.id == 2) {
        this.items = this.popData.city;
        if (this.items[0].area) {
          this.rightData = this.items[0].area;
        }
        this.mark = 2;
      } else if (e.id == 3) {
        this.items = this.popData.order_by;
        this.rightData = [];
        this.mark = 3;
      }
    },
    getLeft (index, item) {
      // index为筛选栏左侧的菜单索引
      this.leftCurrent = index;
      this.rightData = item.area;
      this.rightCurrent = -1;
      this.isbottom = false;
      // this.upLoading = true;
      this.page = 1;
      if (this.mark == 2) {
        this.city_id = item.id;
        this.rightData = item.area;
        //  this.num = item.name
      } else if (this.mark == 3) {
        this.ismask = false;
        this.most = item.id;
        this.sortText = item.name;
        this.getData();
      }
    },
    getRight (index, item) {
      this.rightCurrent = index;
      this.city_id = item.city_id;
      this.district_id = item.id;
      this.isbottom = false;
      // this.upLoading = true;
      this.page = 1;
      this.getData();
      this.ismask = false;
      if (this.mark == 2) {
        this.num = item.name;
      }
    }
    // get_location() {
    //   let that = this;
    //   wx.authorize({
    //     scope: "scope.userLocation",
    //     success() {
    //       wx.getLocation({
    //         type: "gcj02",
    //         success(res) {
    //           console.log("经度纬度",res)
    //         },
    //         fail() {
    //           common.mmk_Loading(2, "无法获取地理位置");
    //           that.province_name = "湖北";
    //           that.province = 13;
    //         }
    //       });
    //     },
    //     fail() {
    //       that.province_name = "湖北";
    //       that.province = 13;
    //     }
    //   });
    // },
  },
  watch: {
    menuTree () {
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
    }
  },
  onLoad (options) {
    // 设置页面标题
    wx.setNavigationBarTitle({
      title: "全部会员卡"
    });
    Object.assign(this.$data, this.$options.data());
    var that = this;
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        console.log("info", info);
        that.province_name = info.province_name;
        that.province_id = info.province_id;
        that.lng = info.lgd ? info.lgd : "";
        that.lat = info.ltd ? info.ltd : "";
        that.getPopData();
        that.getData();
        // that.get_location();
      },
      fail: () => { }
    });
  }
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  // padding-bottom: 48px;
  background-color: #f3f4f6;
  background-size: 100% 80%;
  position: relative;
  box-sizing: border-box;
  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
  }
  .itembox {
    height: 51%;
    width: 100%;
    // background: red;
    position: fixed;
    z-index: 999;
    background: #fff;
    top: 0;
    left: 0;
    overflow: hidden;
    transition: all 0.3s;
    .sortstyle {
      position: absolute;
      top: 8px;
      left: 0;
      z-index: 9999;
      background: #fff;
    }

    .box {
      display: flex;
      width: 100%;
      height: 100%;
      .leftlist {
        width: 50%;
        height: 100%;
        color: #1d2023;
        font-size: 14px;
        display: inline-block;
        overflow: scroll;
        .item {
          height: 40px;
          box-sizing: border-box;
          padding-left: 15px;
          line-height: 40px;
          &.item:nth-last-of-type(1) {
            margin-bottom: 40px;
          }
          &.active {
            position: relative;
            font-weight: bold;
            background: #f5f6fa;
            &::after {
              content: "";
              position: absolute;
              width: 2px;
              height: 20px;
              background: rgba(236, 88, 139, 1);
              top: 28%;
              left: 0;
            }
          }
        }
        &.right {
          height: 100%;
          overflow: scroll;
          .item1 {
            height: 40px;
            box-sizing: border-box;
            padding-left: 15px;
            line-height: 40px;
            background: #f5f6fa;
            &.item1:nth-last-of-type(1) {
              margin-bottom: 40px;
            }
            &.active {
              color: #ec588b;
              //  left: -200000px;
            }
          }
        }
      }
    }
    //    }
  }
  .fadelogIn {
    -webkit-animation: fadelogIn 0.4s;
    animation: fadelogIn 0.4s;
  }

  @keyframes fadelogIn {
    0% {
      -webkit-transform: translate3d(0, -100%, 0);
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  @-webkit-keyframes fadelogIn {
    0% {
      -webkit-transform: translate3d(0, -100%, 0);
    }
    100% {
      -webkit-transform: none;
    }
  }

  .contentbox {
    // padding-top: 24px;
    box-sizing: border-box;
    // height: 100%;
    .sitckybox {
      position: sticky;
      top: 0;
      z-index: 99;
      background: url("https://img.ameimeika.com/h5_images/lifebeauty/wxscroll.png")
        no-repeat;
      background-size: 100% 100%;
      // .nav {
      //   height: 59px;
      //   color: #fff;
      //   // margin-top: 24px;
      //   font-size: 17px;
      //   line-height: 80px;
      //   text-align: center;
      //   &.navitem1{
      //     height: 81px;
      //     line-height: 136px;
      //   }
      // }
      .nav {
        font-size: 17px;
        text-align: center;
        color: #fff;
        height: 45px;
        line-height: 45px;
      }
      .inpbox {
        height: 59px;
        width: 100%;
        display: flex;
        .item {
          width: 100%;
          height: 100%;
          padding: 8px 0 15px 0;
          box-sizing: border-box;
          display: flex;
          .address {
            width: 23%;
            height: 100%;
            display: inline-block;
            color: #fff;
            font-size: 14px;
            position: relative;
            margin-right: 15px;
            line-height: 36px;
            margin-left: 12px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            .gps {
              width: 22px;
              height: 22px;
              vertical-align: middle;
            }
          }
          .box {
            width: 56%;
            display: inline-block;
            position: relative;
            .icon {
              width: 20px;
              height: 20px;
              position: absolute;
              left: 4%;
              top: 18%;
            }
            .inp {
              width: 100%;
              height: 32px;
              border-radius: 16px;
              background: #fff;
              padding-left: 38px;
              box-sizing: border-box;
              line-height: 32px;
              color: #a2abb3;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
          .msgbox {
            display: inline-block;
            position: relative;
            margin: 0 15px;
            width: 6.5%;
            .msg {
              width: 26px;
              height: 26px;
              position: absolute;
              top: 15%;
              // left: 15px;
            }
            .tip {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: linear-gradient(
                180deg,
                rgba(255, 94, 122, 1) 0%,
                rgba(255, 0, 45, 1) 100%
              );
              box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
              border: 1px solid #fff;
              position: absolute;
              top: 11%;
              right: 0;
            }
          }
        }
      }
    }

    .top {
      width: 100%;
      height: 44px;
      box-sizing: border-box;
      padding: 0 13px 0 37px;
      position: relative;
      line-height: 44px;
      color: #fff;
      font-size: 18px;
      .gps,
      .msg,
      .sao {
        position: absolute;
      }
      .gps {
        width: 22px;
        height: 22px;
        left: 13px;
        top: 11px;
      }
      .sao {
        width: 20px;
        height: 20px;
        right: 51px;
        top: 12px;
      }
      .msg {
        width: 22px;
        height: 22px;
        right: 13px;
        top: 11px;
      }
    }

    .adlist {
      width: 94.6%;
      height: auto;
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 15px 0 20px;
      margin: 0 auto 16px;
      .ul {
        box-sizing: border-box;
        padding: 0 12px;
        // &.ul1{
        //   padding: 0 12px;
        // }
        width: 100%;
        display: flex;
        .li {
          width: 20%;
          text-align: center;
          // &.li:nth-of-type(1){
          //   background: red;
          // }
          .img {
            display: inline-block;
            width: 86%;
            height: 58px;
          }
          .title {
            display: inline-block;
            width: 100%;
            font-size: 12px;
            color: #3f454b;
            text-align: center;
          }
        }
      }
      .ul2 {
        height: auto;
        display: inline-block;
        text-align: center;
        padding: 0 12px;
        .li {
          width: 20%;
          display: inline-block;
          margin-top: 20px;
          .img {
            width: 30px;
            height: 30px;
            display: inline-block;
          }
        }
      }
    }
    .adbox {
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      padding-bottom: 10px;
      // margin-top: 20px;
      .banner {
        width: 100%;
        .img1 {
          height: 112px;
          width: 100%;
          border-radius: 5px;
          margin-bottom: 8px;
        }
      }
      .show {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        .left,
        .right {
          width: 49%;
        }
        .left {
          margin-right: 8px;
          .img2 {
            width: 100%;
            height: 180px;
            border-radius: 5px;
          }
        }
        .right {
          .img3,
          .img4 {
            height: 86px;
            display: block;
            width: 100%;
            border-radius: 5px;
          }
          .img3 {
            margin-bottom: 8px;
          }
        }
      }
    }
    // 分类栏
    .typelist {
      height: 44px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 15px;
      display: block;
      color: #1d2023;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;
      background: #fff;
      // line-height: 60px;
      position: sticky;
      z-index: 99;

      .li {
        width: auto;
        height: 44px;
        float: left;
        line-height: 44px;
        margin-right: 24px;
        font-size: 16px;
        &.active {
          position: relative;
          // font-weight: bold;
          font-size: 18px;
          background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/indexpage/rectangle@3x.png");
          background-size: 100% 5px;
          background-position: 100% 66%;
          background-repeat: no-repeat;
        }
      }
    }
    // 智能排序
    .type2 {
      width: 100%;
      height: 28px;
      margin: 0 auto;
      box-sizing: border-box;
      font-size: 14px;
      color: #3f454b;
      display: flex;
      text-align: center;
      padding-top: 8px;
      background: #fff;
      .item {
        width: 33.3%;
        height: auto;
        &.active {
          color: #ec588b;
        }
        &.active1 {
          color: #3f454b;
        }

        &.item:nth-of-type(2) {
          border-left: 1px solid #e6e6e6;
          border-right: 1px solid #e6e6e6;
        }
      }
      .img {
        width: 8px;
        height: 6px;
      }
    }
    .sort {
      position: sticky;
      z-index: 99;
    }
    .listbox {
      width: 100%;
      position: relative;
      z-index: 1;
      background: #f3f4f6;
      .empty {
        width: 100%;
        padding-bottom: 50px;
        text-align: center;
        margin-top: 20%;
        .img {
          height: 130px;
          width: 175px;
          display: inline-block;
        }
        .text {
          color: #666;
          font-size: 14px;
        }
      }
      .bottomtext {
        width: 100%;
        height: 60px;
        font-size: 14px;
        font-weight: 400;
        color: #999;
        text-align: center;
        line-height: 60px;
        display: inline-block;
      }
    }
  }
}
.z-index {
  position: fixed !important;
  top: 0;
  z-index: 99999 !important;
  width: 100%;
}
// 会员卡
.cardlistbox {
  margin-top: 20px;
}
.cardlistbox .cardlist {
  margin: 0 20px;
}
.cardlistbox .cardlist .item {
  margin-top: 10px;
  position: relative;
  width: 100%;
  height: 155px;
  background: linear-gradient(
    11deg,
    rgba(39, 36, 36, 1) 0%,
    rgba(64, 67, 84, 1) 100%
  );
  border-radius: 8px;
}
.cardlistbox .cardlist .item:last-child {
  margin-bottom: 10px;
}
.shadimg {
  width: 100%;
  height: 100%;
}
.shadimg > img {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  z-index: 6;
}
.cardinfo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.cardinfo > .position {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 213, 138, 1);
  line-height: 20px;
  margin-top: 20px;
  margin-left: 20px;
}
.cardinfo > .name {
  margin-top: 5px;
  margin-left: 20px;
  font-size: 18px;
  color: #ffe0aa;
}
.cardinfo > .bottom > .price {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 21px;
  color: #ffe0aa;
}
.cardinfo > .bottom > .sale {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 12px;
  color: #ffe0aa;
}
.cardinfo > .bottom > .price > .yang {
  font-size: 12px;
  color: #ffe0aa;
}
.bottomtext {
  width: 100%;
  height: 60px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(153, 153, 144, 1);
  text-align: center;
  line-height: 60px;
  .line {
    width: 18px;
    height: 1px;
    background-color: #dbdbdb;
    display: inline-block;
    vertical-align: middle;
    &:first-of-type {
      margin-right: 10px;
    }
    &:last-of-type {
      margin-left: 10px;
    }
  }
}
</style>

